<template>
	<Tabs>
		<TabPane label="编辑会员">
			<Form ref="form" :model="formData" :rules="rules" label-position="top">
	    		<FormDescItem label="会员昵称" prop="nickname" desc="设置会员昵称，将作为用户会员名">
	    			<Input v-model="formData.nickname"></Input>
	    		</FormDescItem>
	    		<FormDescItem label="会员手机" prop="mobile" desc="设置会员手机号，会员手机号将作为用户登录的登录账号以及接收短信的通知号码">
	    			<Input v-model="formData.mobile"></Input>
	    		</FormDescItem>
	    		<FormDescItem label="会员等级" prop="group_id" desc="选择会员所属等级，会员等级享受对应等级的权限">
	    			<Select v-model="formData.group_id">
	    				<Option v-for="item in rankLists" :key="item.id" :value="item.id">{{ item.name }}</Option>
	    			</Select>
	    		</FormDescItem>
	    		<FormDescItem label="会员余额" prop="balance" desc="设置会员账户余额，账户余额可直接用于消费，请谨慎调整">
	    			<Input v-model="formData.balance" number>
				        <Select v-model="formData.balance_type" slot="prepend" style="width: 80px">
				            <Option :value="1">增加</Option>
				            <Option :value="0">减少</Option>
				        </Select>
				    </Input>
	    		</FormDescItem>
	    		<FormDescItem label="会员积分" prop="integral" desc="设置会员账户积分，账户余额可直接用于在积分商城或下单时使用，请谨慎调整">
	    			<Input v-model="formData.integral" number>
				        <Select v-model="formData.integral_type" slot="prepend" style="width: 80px">
				            <Option :value="1">增加</Option>
				            <Option :value="0">减少</Option>
				        </Select>
				    </Input>
	    		</FormDescItem>
	    		<FormDescItem label="会员分组" prop="group_ext_id" desc="选择会员所属组别，可多选，会员默认会分组至未购物分组">
	    			<Select v-model="formData.group_ext_id" multiple>
	    				<Option v-for="item in groupLists" :key="item.id" :value="item.id">{{ item.name }}</Option>
	    			</Select>
	    		</FormDescItem>
	    		<FormItem>
	    			<Button type="primary" :loading="committing" @click="handleSubmit">保存设置并启用</Button>
	    			<Button @click="handleBack">返回列表</Button>
	    		</FormItem>
	    	</Form>
		</TabPane>
	</Tabs>
</template>

<script>
import Util from '@/libs/util.js';
import FormDescItem from '@/components/form/FormDescItem.vue';
export default {
	name: '',
	components: {
		FormDescItem
	},
	data() {
		return {
			committing: false,
			rankLists: [],
			groupLists: [],
			formData: {
				id: '',
				nickname: '',
				mobile: '',
				balance: null,
				balance_type: 1,
				integral: null,
				integral_type: 1,
				group_ext_id: [1],
				group_id: 1
			},
			rules: {
				nickname: [
					{required: true, message: '请填写会员昵称', trigger: 'bulr'}
				],
				mobile: [
					{required: true, message: '请填写会员手机号', trigger: 'bulr'}
				],
				balance: [
					{type: 'number', message: '余额请填写数字类型', trigger: 'bulr'}
				],
				integral: [
					{type: 'number', message: '积分请填写数字类型', trigger: 'bulr'}
				],
				group_id: [
					{required: true, message: '请选择会员等级', trigger: 'change'}
				],
				group_ext_id: [
					{required: true, type: 'array', message: '请选择会员分组', trigger: 'change'}
				]
			}
		}
	},
	mounted() {
		if(this.$route.query.id) {
			this.formData.id = this.$route.query.id;
			this.init();
		}
	},
	methods: {
		init() {
			// 获取分组列表
			Util.ajax.post(this.API['API_MEMBER_GROUP_LISTS'], {page: false, limit: false, order: 0}).then(res => {
				this.groupLists = res;
			}).catch(() => {
				
			})
			
			// 获取等级列表
			Util.ajax.post(this.API['API_MEMBER_GRADE_LISTS'], {page: false, limit: false, order: 0}).then(res => {
				this.rankLists = res;
			}).catch(() => {
				
			})
			
			Util.ajax.post(this.API['API_MEMBER_DETAIL'], {id: this.formData.id}).then(res => {
				this.formData.nickname = res.nickname;
				this.formData.mobile = res.mobile;
				this.formData.group_ext_id = [res.group_ext_id];
				this.formData.group_id = res.group_id;
			}).catch(() => {
				
			})
		},
		handleSubmit() {
			if(this.committing) return false;
			this.$refs.form.validate(valid => {
                if(valid) {
                	let form = this.formData;
            		let params = {
            			id: form.id,
            			nickname: form.nickname,
            			mobile: form.mobile,
            			group_ext_id: form.group_ext_id,
            			group_id: form.group_id
            		}
                }
            })
		},
		// 返回列表
		handleBack() {
			this.$router.back();
		}
	}
}
</script>